<template>
	<ElTable v-loading="isLoading" :data="list">
		<ElTableColumn
			v-for="(column, index) in columns"
			:key="index"
			:type="column.type"
			:width="column.width"
			:min-widt="column.minWidth"
			:label="column.label"
			:prop="column.prop">
			<template #default="{ row }" v-if="column.customComponent">
				<component :is="column.customComponent" :row="row" />
			</template>
		</ElTableColumn>
	</ElTable>
</template>

<script setup lang="ts">
import UserColumn from "./components/user-column/index.vue";
import StatusColumn from "./components/status-column/index.vue";
import ProgressColumn from "./components/progress-column/index.vue";
import OperationColumn from "./components/operation-column/index.vue";

import { useColumns } from "./hooks";

defineOptions({
	components: {
		UserColumn,
		ProgressColumn,
		StatusColumn,
		OperationColumn
	},
});

const props = defineProps({
	isLoading: {
		type: Boolean,
		default: false,
	},
	list: {
		type: Array,
		default: () => [],
	},
});

const { columns } = useColumns();
</script>

<style scoped lang="scss" src="./index.scss"></style>
